<template>
	<div>
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
			<el-row>
				<el-col :span="12">
					<el-form-item label="头像" prop="Image">
						<el-upload class="avatar-uploader" :action="baseapi + '/Files'" :show-file-list="false"
							:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
							<el-image v-if="ruleForm.Image" :fit="fill" :src="baseImg + ruleForm.Image"
								class="avatar" />
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</el-form-item>
					<el-form-item label="姓名" prop="UserName">
						<el-input v-model="ruleForm.UserName" placeholder="请输入姓名"></el-input>
					</el-form-item>
					<el-form-item label="性别" prop="Sex">
						<el-radio-group v-model="ruleForm.Sex">
							<el-radio label="男"></el-radio>
							<el-radio label="女"></el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="出生日期" required>
						<el-form-item prop="Birthday" style="width: 200px">
							<el-date-picker type="datetime" placeholder="选择出生日期" v-model="ruleForm.Birthday"
								style="width: 100%"></el-date-picker>
						</el-form-item>
					</el-form-item>

					<el-form-item label="手机号码" prop="Phone">
						<el-input v-model="ruleForm.Phone" placeholder="请输入手机号"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<label style="margin: 20px;color: coral;">登录昵称不能与其他账号重复，否则会引发500错误！！！</label> 
					<el-form-item label="登录昵称"  prop="LoginName">
						<el-input v-model="ruleForm.LoginName" placeholder="请输入昵称"></el-input>
					</el-form-item>
					<el-form-item label="登录密码" prop="LoginPwd">
						<el-input show-password v-model="ruleForm.LoginPwd" placeholder="请输入密码"></el-input>
					</el-form-item>
					<el-form-item label="部门" prop="deptID">
						<el-select v-model="ruleForm.deptID" @input="Sea" placeholder="请选择部门">
							<el-option v-for="(item, index) in Department" :key="index" :label="item.deptName"
								:value="item.deptID"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="角色" prop="RoleID">
						<el-select v-model="ruleForm.RoleID" placeholder="请选择角色">
							<el-option v-for="(item, index) in roles" :key="index" :label="item.RoleName"
								:value="item.RoleID"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="状态" prop="Status">
						<el-switch v-model="ruleForm.Status"></el-switch>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="submitForm('ruleForm')">新增用户</el-button>
						<el-button @click="resetForm('ruleForm')">重置</el-button>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
	</div>
</template>

<script>
import basepath from '@/plugins/base.js'
export default {
	name: "Add",
	data() {
		return {
			roles: [],
			baseapi: '',
			baseImg: '',
			Department: [],
			ruleForm: {
				LoginName: null,
				UserName: null,
				Sex: null,
				Birthday: null,
				Phone: null,
				LoginPwd: null,
				Status: true,
				RoleID: null,
				deptID: null,
				Image: null
			},
			rules: {
				UserName: [
					{required: true,message: "请输入姓名",trigger: "blur"},
					{min: 2,max: 5,message: "长度在 2 到 5 个字符",trigger: "blur"}
				],
				LoginName: [
					{required: true,message: "请输入登录昵称",trigger: "blur"},
					{min: 2,max: 5,message: "长度在 2 到 5 个字符",trigger: "blur"}
				],
				Sex: [{required: true,message: "请选择性别",trigger: "change"}],
				Phone: [
					{required: true,message: "请输入手机号码",trigger: "blur"},
					{min: 11,max: 11,message: "长度在为11位数字",trigger: "blur"}
				],
				LoginPwd: [
					{required: true,message: "请输入密码",trigger: "blur"},
					{min: 6,max: 11,message: "长度在在6-11位",trigger: "blur"}
				],
				RoleID: [{required: true,message: "请选择角色",trigger: "change"}],
				deptID: [{required: true,message: "请选择部门",trigger: "change"}]
			}
		};
	},
	model: {
		prop: "dialogFormVisible",
		event: "change",
	},
	props: {
		dialogFormVisible: Boolean,
	},
	methods: {
		//上传成功
		handleAvatarSuccess(res, file) {
			console.log(file)
			if (res.code == 1) {
				this.$notify.success({ title: '成功', message: '图片上传成功!' })
				this.ruleForm.Image = res.data;
			} else {
				this.$message.error(res.msg);
			}
		},
		//上传之前
		beforeAvatarUpload(file) {
			const isJPG = file.type === 'image/jpeg';
			const isPNG = file.type === 'image/png';

			const isLtMB = file.size / 1024 / 1024 < 10;

			if (!isJPG && !isPNG) {
				this.$notify.error({ title: '失败', message: '上传头像图片只能是 JPG 和 PNG 格式!' })
			}
			if (!isLtMB) {
				this.$notify.error({ title: '失败', message: '上传头像图片大小不能超过 10MB!' })
			}
			return (isJPG || isPNG) && isLtMB;
		},
		//提交表单
		submitForm(formName) {
			console.log(this.ruleForm);
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.axios({
						method: "POST",
						url: "Users",
						data: JSON.stringify(this.ruleForm),
						headers: {
							Authorization: sessionStorage.getItem("token"),
							"Content-Type": "application/json",
						},
					})
						.then((res) => {
							if (res.data.msg == "用户信息添加成功！") {
								this.$notify({
									title: "成功",
									message: res.data.msg,
									type: "success",
								});
								// 触发刷新
								this.$emit("refresh");
								this.$emit("change", false);

							} else {
								this.$notify.error({
									title: "错误",
									message: res.data.msg,
								});
								
								this.$notify.error({
									title: "错误",
									message: res.data.msg,
								});

							}
						})
						.catch((err) => {
							console.log("err: ", err);
							this.$notify.error({
								title: "错误",
								message: err.message,
							});
						});

				} else {
					console.log("error submit!!");
					return false;
				}
			});
		},
		Sea(value) {
			this.roles = null;
			this.GetRoles(value);
		},
		//重置表单
		resetForm(formName) {
			this.$refs[formName].resetFields();
		},
		//获取角色数据
		GetRoles(value) {
			if (value != null) {
				this.axios({
					method: "get",
					url: "Roles",
					params: {
						did: value,
					},
					headers: {
						Authorization: sessionStorage.getItem("token"),
					},
				}).then((res) => {
					console.log("角色res: ", res.data.data);
					this.roles = res.data.data;
					this.ruleForm.RoleID = this.roles[0].RoleID;
				});
			}
		},
	},
	created() {
		this.baseapi = basepath.apiUrl;
		this.baseImg = basepath.imgUrl;
		//获取部门数据
		this.axios({
			method: "get",
			url: "Department",
			headers: {
				Authorization: sessionStorage.getItem("token"),
			},
		}).then((res) => {
			this.Department = res.data.data;
			this.ruleForm.deptID = this.Department[0].deptID;
			this.GetRoles(this.Department[0].deptID);
		});
	},
};
</script>

<style scoped>
.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.avatar-uploader .el-upload:hover {
	border-color: #409eff;
}

.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
}

.avatar {
	width: 178px;
	height: 178px;
	display: block;
}
</style>